<template>
  <div class="loginLog">
    <div class="mains_contain">
      <el-form
        :inline="true"
        :model="searchForm"
        size="small"
        label-width="80px"
      >
        <el-form-item label="登录账号">
          <el-input
            v-model="searchForm.account"
            clearable
            placeholder="请输入登录账号"
          />
        </el-form-item>
        <el-form-item label="登录时间">
          <el-date-picker
            v-model="valueTimes"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="change"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="search"
            icon="el-icon-search"
            size="mini"
            >查询</el-button
          >
          <el-button
            type="primary"
            @click="exportLog"
            icon="el-icon-download"
            size="mini"
            >导出</el-button
          >
        </el-form-item>
      </el-form>

      <div class="contant">
        <el-table
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          fit
          :max-height="maxHeight"
          border
          stripe
          size="mini"
          highlight-current-row
          :header-cell-style="{ background: '#e5e5e5', color: '#000' }"
        >
          <el-table-column prop="account" label="登录账号" />
          <el-table-column prop="userName" label="用户名" />
          <el-table-column prop="address" label="登录地址" />
          <el-table-column prop="ip" label="ip地址" />
          <el-table-column prop="loginContent" label="日志内容" />
          <el-table-column prop="createdTime" label="登录时间">
            <template slot-scope="scope">
              {{ scope.row.createdTime | formatTime }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="230">
            <template slot-scope="{ row }">
              <el-button
                type="text"
                size="mini"
                @click="handleInfo(row)"
                icon="el-icon-view"
                >详情</el-button
              >
              <!-- <el-button
                type="text"
                style="color:#F56C6C"
                size="mini"
                icon="el-icon-delete"
                @click="handleDelete(row)"
                >删除</el-button
              > -->
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: right">
          <pagination
            v-show="pagination.total > 0"
            :limit.sync="pagination.pageSize"
            :page.sync="pagination.page"
            :total="pagination.total"
            @pagination="getPageList"
          />
        </div>
      </div>
    </div>
    <el-dialog
      title="日志详情"
      :visible.sync="dialogVisible"
      width="800px"
      top="5vh"
      v-dialogDrag
    >
      <el-form ref="infoForm" :model="infoForm" label-width="100px" size="mini">
        <el-form-item label="登录账号：">{{ infoForm.account }}</el-form-item>
        <el-form-item label="用户名：">{{ infoForm.userName }}</el-form-item>
        <el-form-item label="登录地址：">{{ infoForm.address }}</el-form-item>
        <el-form-item label="登录时间：">{{ infoForm.address }}</el-form-item>
        <el-form-item label="登录时间：">{{
          infoForm.createdTime | formatTime
        }}</el-form-item>
        <el-form-item label="ip地址：">{{ infoForm.ip }}</el-form-item>
      </el-form>
      <div style="text-align: right">
        <el-button @click="dialogVisible = false" size="small">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import * as api from "@/api/link/loginLog";
import { isJSON, formatTimeNew } from "@/utils/index";
export default {
  comments: {},
  props: {},
  data() {
    return {
      //   multipleSelection: [],
      tableData: [],
      pagination: {
        total: 1,
        page: 1,
        pageSize: 10,
      },
      dialogVisible: false,
      infoForm: {},
      searchForm: {},
      valueTimes: "",
      exportUrl: "/api/v1/login-log/export",
    };
  },
  computed: {
    maxHeight() {
      var curHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
      return curHeight - 280;
    },
  },
  created() {
    this.getPageList();
  },
  mounted() {},
  methods: {
    handleInfo(row) {
      console.log(row);
      this.dialogVisible = true;
      var curRow = Object.assign(row);
      if (isJSON(curRow.body)) {
        curRow.body = JSON.parse(curRow.body);
      } else {
        curRow.body = {};
      }
      if (isJSON(curRow.responseBody)) {
        curRow.responseBody = JSON.parse(curRow.responseBody);
      } else {
        curRow.responseBody = {};
      }
      if (isJSON(curRow.responseData)) {
        curRow.responseData = JSON.parse(curRow.responseData);
      } else {
        curRow.responseData = {};
      }

      this.infoForm = curRow;
    },
    // 复选框事件
    handleSelectionChange(val) {
      //   this.multipleSelection = val;
    },
    getPageList() {
      this.searchList();
    },
    search() {
      this.pagination.page = 1;
      this.searchList();
    },
    searchList() {
      const p = Object.assign({}, this.pagination);
      if (
        this.searchForm.account != undefined &&
        this.searchForm.account != ""
      ) {
        p.account = this.searchForm.account;
      }
      if (this.searchForm.startTime && this.searchForm.endTime) {
        p.startTime = this.searchForm.startTime;
        p.endTime = this.searchForm.endTime;
      } else {
        p.startTime = "";
        p.endTime = "";
      }
      api.page(p).then((resp) => {
        this.tableData = resp.data.list;
        this.pagination = resp.data.pagination;
        this.pagination.page = resp.data.pagination.current;
      });
    },
    //删除
    handleDelete(row) {
      this.$confirm("此操作将永久删除该日志, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api.deleteById(row.id).then((resp) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            if ((this.pagination.total - 1) % this.pagination.pageSize == 0) {
              if (this.pagination.page > 1) {
                this.pagination.page = this.pagination.page - 1;
              }
            }
            this.search();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    exportLog() {
      let param = {
        startTime: this.searchForm.startTime,
        endTime: this.searchForm.endTime,
      };
      api.exportLog(param).then((res) => {
        const blob = new Blob([res], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        });
        const fileName = "登录日志" + ".xlsx";
        if ("download" in document.createElement("a")) {
          // 支持a标签download的浏览器
          const link = document.createElement("a"); // 创建a标签
          link.download = fileName; // a标签添加属性
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          document.body.appendChild(link);
          link.click(); // 执行下载
          URL.revokeObjectURL(link.href); // 释放url
          document.body.removeChild(link); // 释放标签
        } else {
          // 其他浏览器
          navigator.msSaveBlob(blob, fileName);
        }
      });
      return;
    },
    change(val) {
      if (val) {
        this.searchForm.startTime = val[0];
        this.searchForm.endTime = val[1];
      }else{
         this.searchForm.startTime = ''
        this.searchForm.endTime = ''
      }
    },
  },
};
</script>

<style scoped lang="scss">
.loginLog {
  padding: 20px;

  .curHeader {
    position: relative;
    height: 40px;
    .searcherBox {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}
</style>



<style lang="scss">
.loginLog {
  .el-form-item--mini .el-form-item__content,
  .el-form-item--mini .el-form-item__label {
    line-height: 15px !important;
  }
}
</style>
